<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      style="border-bottom: 1px solid #ccc"
    />
    <Editor
      v-model="html"
      :defaultConfig="editorConfig"
      style="height: 500px; overflow-y: hidden"
      @onCreated="handleCreated"
    />
    <el-button @click="getHtml()">获取信息</el-button>
  </div>
</template>

<script>
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

export default {
  components: { Editor, Toolbar },
  data() {
    return {
      editorRef: null,
      html: "<p>hello</p>",
      toolbarConfig: {
        excludeKeys: [
          "uploadImage", // 排除上传图片
          "fullScreen", // 排除全屏
        ],
      },
      editorConfig: {
        placeholder: "请输入内容...",
        MENU_CONF: {
          uploadImage: {
            server: "/api/upload",
            fieldName: "file",
          },
        },
      },
    };
  },
  methods: {
    getHtml() {
      console.log(this.editorRef.getHtml(),this.html);
    },
    handleCreated(editor) {
      this.editorRef = editor;
    },
  },
  beforeDestroy() {
    if (this.editorRef == null) return;
    this.editorRef.destroy();
  },
};
</script>

<style></style>
